<%@ page import="com.nian.service.impl.UserServiceImpl" %>
<%@ page import="com.nian.pojo.Product" %>
<%@ page import="java.util.List" %>
<%@ page import="jdk.nashorn.internal.ir.CallNode" %>
<%@ page import="java.io.PrintWriter" %>
<%@ page import="com.nian.service.impl.ProductServiceImpl" %>
<%@ page import="com.nian.service.ProductService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/favicon.ico">
		<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">

		<title>在线书城后台管理系统</title>

		<!-- Bootstrap core CSS -->
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<link href="../css/bootstrap-theme.min.css" rel="stylesheet">

		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/css/ie10-viewport-bug-workaround.css"
		 rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/examples/dashboard/dashboard.css" rel="stylesheet">

		<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
		<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie-emulation-modes-warning.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	  <script src="../js/jquery-1.7.2.min.js"><script>
    <![endif]-->
	</head>

	<body>
	<%@include file="plugins/adminNav.jsp"%>
		<div class="container-fluid">
			<div class="row">
				<%@include file="plugins/adminSideBar.jsp"%>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h2 class="sub-header">商品列表</h2>
					<!-- 绑定模态框按钮 -->
					<button class="btn btn-primary btn-add" data-toggle="modal" data-target="#productModal" >添加商品</button>
					<div class="table-responsive">
                        <%
                            ProductService productService = new ProductServiceImpl();
							List<Product> products = productService.selectAllProduct();
							request.setAttribute("flag","添加");
						%>
						<table class="table table-striped">
							<thead>
								<tr>
									<th>商品ID</th>
									<th>商品名称</th>
									<th>商品价格</th>
									<th>商品分类</th>
									<th>商品数量</th>
									<th>商品图片</th>
									<th>商品描述</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<% for (Product product : products) {
									%>
								<tr>
									<td><%= product.getId()%></td>
									<td><%= product.getName()%></td>
									<td><%= product.getPrice()%></td>
									<td><%= product.getCategory()%></td>
									<td><%= product.getpNum()%></td>
									<td>
										<% out.println("<img src=/bookStore/img/"+ product.getImgUrl() +" style=\"width: 150px; height: 150px;\" alt=\"...\" class=\"img-thumbnail\">");%>
									</td>
									<td><%= product.getDescription()%></td>
									<td>
										<button class="btn btn-info btn-re" data-toggle="modal" data-target="#productModal" >修改</button>
										<button class="btn btn-danger btn-delete">删除</button>
									</td>
								</tr>

								<% } %>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- 商品模态框部分 -->
		<!-- Modal -->
		<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">

				<div class="modal-content">
					<form class="form-horizontal" action="./product.do">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel0">商品修改</h4>
					</div>
								<%--	   隐藏input设置					--%>
						<input type="hidden" name="action" id="action" value="addProduct">
						<input type="hidden" name="id" id="id" value="">

					<div class="modal-body">
						<div class="row">
							<div class="col-md-1"></div>
							<div class="col-md-10">
									<div class="form-group">
										<label for="name" class="col-sm-3 control-label">商品名称</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="name" name="name" placeholder="商品名称">
										</div>
									</div>
									<div class="form-group">
										<label for="price" class="col-sm-3 control-label">商品价格</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="price" name="price" placeholder="商品价格">
										</div>
									</div>
									<div class="form-group">
										<label for="category" class="col-sm-3 control-label">商品分类</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="category" name="category" placeholder="商品分类">
										</div>
									</div>
									<div class="form-group">
										<label for="pNum" class="col-sm-3 control-label">商品数量</label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="pNum" name="pNum" placeholder="商品数量">
										</div>
									</div>
									<div class="form-group">
										<label for="imgUrl" class="col-sm-3 control-label">商品图片</label>
										<div class="col-sm-9">
											<input type="file" class="form-control" id="imgUrl" name="imgUrl" placeholder="请上传商品图片" onchange="upFile()">
											<input type="hidden" id="realname" name="realname" value="">
										</div>
									</div>
									<div class="form-group">
										<label for="description" class="col-sm-3 control-label">商品描述</label>
										<div class="col-sm-9">
											<textarea class="form-control" id="description" name="description" placeholder="商品描述"></textarea>
										</div>
									</div>
							</div>
							<div class="col-md-1"></div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary">保存</button>
					</div>
					</form>
				</div>
			</div>
		</div>


		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="../js/jquery-1.11.3.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		 crossorigin="anonymous"></script>
		<script>
			window.jQuery || document.write(
				'<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
			)
		</script>
		<script src="../js/bootstrap.min.js"></script>
		<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/holder.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie10-viewport-bug-workaround.js"></script>
	<script src="../js/sweetalert.min.js"></script>
	<script>
		function upFile(){
			console.log(123)
			var file = $("#imgUrl")[0].files[0];
			var myForm = new FormData();//必须使用FormData表达上传数据
			myForm.append("file", file);
			$.ajax({
				method: "post",
				url: "./upFile.do",
				data: myForm,
				processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
				contentType: false,//必须false才会自动加上正确的Content-Type
				dataType: "text",
				success: function (data) {
					console.log(data);
					$('#realname').attr('value', data);
					$("#imgUrl").val('/bookStore/img/' + data)
					console.log(data)
					//将服务器回传的图片真实名称填写到隐藏域中
				},
				error: function (err) {
					console.log("error：" + err);
				}
			});
		}
		$(function () {
			$(".btn-add").click(function () {
				$("#myModalLabel0").text("商品添加")
				$("#id").attr("value","")
				$("#action").val("addProduct")


			})
			$(".btn-re").click(function () {
				$("#myModalLabel0").text("商品修改")
				var id = $(this).parent().parent().children('td').eq(0).text().trim();
				$("#id").attr("value",id)
				$("#action").val("reProduct")
				$("#name").val($(this).parent().parent().children('td').eq(1).text().trim());
				$("#price").val($(this).parent().parent().children('td').eq(2).text().trim());
				$("#category").val($(this).parent().parent().children('td').eq(3).text().trim());
				$("#pNum").val($(this).parent().parent().children('td').eq(4).text().trim());
				$("#imgUrl").val($(this).parent().parent().children('td').eq(5).text().trim());
				$("#description").val($(this).parent().parent().children('td').eq(6).text().trim());
			})
			$(".btn-delete").click(function () {
				var id = $(this).parent().parent().children('td').eq(0).text().trim();
				location.href = './product.do?action=deleteProduct&id=' + id;
			})
		})
	</script>

    </body>
</html>
